<template xmlns:v-slot="http://www.springframework.org/schema/rabbit">
    <v-content class="top80px">
        <v-layout>
            <v-flex xs3 class="overflow-auto type-background">
                <v-sheet class="left-color" :height="clientHeight">
                    <v-card dark :height="clientHeight">
                        <v-card-title class="subtitle-1">
                            <v-tooltip right>
                                <template v-slot:activator="{ on }">
                                    <v-icon v-on="on" dark>mdi-book-variant</v-icon>
                                </template>
                                <span>文章千古事，得失寸心知。</span>
                            </v-tooltip>
                        </v-card-title>
                        <v-card-actions>
                            <v-btn block circle outlined color="grey lighten-5" dark @click="alert = !alert">
                                <v-icon>mdi-plus</v-icon>
                                新建分类
                            </v-btn>
                        </v-card-actions>
                        <div class="left-color">
                            <v-alert
                                    :value="alert"
                                    color="#424242"
                                    dark
                                    icon="mdi-emoticon-happy"
                                    dense
                                    transition="scale-transition"
                            >
                                <v-form
                                        ref="form"
                                        v-model="valid"
                                        :lazy-validation="lazy"
                                >
                                    <v-row>
                                        <v-text-field
                                                dark
                                                v-model="sortName"
                                                :counter="10"
                                                :rules="nameRules"
                                                label="分类名称"
                                                required
                                        />
                                    </v-row>
                                    <v-row>
                                        <v-btn dark outlined @click="addBlogSort">提交</v-btn>
                                        <v-btn dark outlined @click="alert = !alert" class="ml-5">取消</v-btn>
                                    </v-row>
                                </v-form>
                            </v-alert>
                        </div>
                        <v-card-text class="left-color">
                            <!--文章分类的内容-->
                            <v-list dense>
                                <v-list-item-group v-model="typeList" color="primary">
                                    <v-list-item
                                            v-for="blog in blogTypes"
                                            :key="blog.id"
                                            @click="getBlogsByType(blog.blogType)"
                                    >
                                        <v-list-item-icon>
                                            <v-icon v-text="blog.icon"/>
                                        </v-list-item-icon>
                                        <v-list-item-content>
                                            <v-list-item-title v-text="blog.name"/>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-menu dark right close-on-click>
                                                <template v-slot:activator="{ on }">
                                                    <v-btn
                                                            dark
                                                            color="#424242"
                                                            max-width="32"
                                                            fab
                                                            x-small
                                                            elevation="0"
                                                            v-on="on"
                                                    >
                                                        <v-icon>mdi-settings</v-icon>
                                                    </v-btn>
                                                </template>
                                                <v-list>
                                                    <v-list-item>
                                                        <v-list-item-title @click="openEditDialog(blog.id,blog.name)">
                                                            修改分类
                                                        </v-list-item-title>
                                                    </v-list-item>
                                                    <v-list-item
                                                            @click="deleteBlogType(blog.id)"
                                                    >
                                                        <v-list-item-title>删除分类</v-list-item-title>
                                                    </v-list-item>
                                                </v-list>
                                            </v-menu>
                                        </v-list-item-action>
                                    </v-list-item>
                                </v-list-item-group>
                            </v-list>
                        </v-card-text>
                    </v-card>
                </v-sheet>
            </v-flex>
            <v-flex class="overflow-auto type-background" xs3>
                <v-sheet dark :height="clientHeight">
                    <v-card :height="clientHeight">
                        <v-card-title class="subtitle-1">
                            <v-tooltip right>
                                <template v-slot:activator="{ on }">
                                    <v-icon v-on="on">mdi-pen</v-icon>
                                </template>
                                <span>江湖儿女，谁无半点心事？</span>
                            </v-tooltip>
                        </v-card-title>
                        <v-card-actions>
                            <v-tooltip right>
                                <template v-slot:activator="{ on }">
                                    <v-btn small circle fab color="#424242"
                                           @click="newArticle">
                                        <v-icon v-on="on">mdi-plus</v-icon>
                                    </v-btn>
                                </template>
                                <span>新建文章</span>
                            </v-tooltip>
                            <v-card-text class="caption">在下方新建文章</v-card-text>
                        </v-card-actions>
                        <v-divider/>
                        <!--文章分类的内容-->
                        <v-list v-if="blogs && blogs.length > 0">
                            <v-list-item-group v-model="articleList" color="primary">
                                <v-list-item
                                        v-for="(blog, i) in blogs"
                                        :key="i"
                                        @click="showEditorArea(blog)"
                                >
                                    <v-list-item-content>
                                        <v-list-item-title :value="blogTitle">{{blog.title}}</v-list-item-title>
                                    </v-list-item-content>
                                    <v-list-item-action>
                                        <v-menu dark left close-on-click>
                                            <template v-slot:activator="{ on }">
                                                <v-btn
                                                        max-width="32"
                                                        fab
                                                        x-small
                                                        color="#424242"
                                                        elevation="0"
                                                        v-on="on"
                                                >
                                                    <v-icon>mdi-settings</v-icon>
                                                </v-btn>
                                            </template>
                                            <v-list>
                                                <v-list-item
                                                        @click="deleteBlog(blog.id)"
                                                >
                                                    <v-list-item-title>删除文章</v-list-item-title>
                                                </v-list-item>
                                            </v-list>
                                        </v-menu>
                                    </v-list-item-action>
                                </v-list-item>
                            </v-list-item-group>
                        </v-list>
                        <v-list dense v-else="">
                            <v-list-item-content>

                            </v-list-item-content>
                        </v-list>
                    </v-card>
                </v-sheet>
            </v-flex>
            <v-flex class="overflow-auto type-background" xs6>
                <v-sheet :height="clientHeight">
                    <v-card :height="clientHeight" v-if="editorShow">
                        <v-layout column>
                            <v-flex>
                                <v-row>
                                    <v-col cols="9">
                                        <v-text-field
                                                v-model="blogTitle"
                                                :counter="50"
                                                :rules="blogNameRules"
                                                label="文章标题"
                                                prepend-icon="mdi-blogger"
                                                clearable
                                                required
                                        />
                                    </v-col>
                                    <v-spacer/>
                                    <v-col class="aligin-center" cols="2">
                                        <v-btn
                                                text
                                                color="blue darken-1"
                                                @click="openPublishArea">
                                            <v-icon>mdi-share</v-icon>
                                            发布文章
                                        </v-btn>
                                    </v-col>
                                </v-row>
                            </v-flex>
                            <v-flex>
                                <div class="mavonEditor">
                                    <mavon-editor
                                            :boxShadow="false"
                                            :scrollStyle="true"
                                            :subfield="false"
                                            v-model="blogContent"/>
                                </div>
                            </v-flex>
                        </v-layout>
                    </v-card>
                    <v-card :height="clientHeight" v-else="">
                        <v-card-text>
                            快他妈的写点什么吧~
                        </v-card-text>
                    </v-card>
                </v-sheet>

            </v-flex>
        </v-layout>

        <!--隐藏的对话框-->
        <v-dialog v-model="dialog" persistent max-width="600px">
            <v-card>
                <v-card-title>
                    <span class="headline">修改分类</span>
                </v-card-title>
                <v-card-text>
                    <v-container>
                        <v-row>
                            <v-col cols="12">
                                <v-text-field
                                        label="*分类名称:"
                                        :rules="nameRules"
                                        v-model="dialogValue"
                                        required/>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-card-text>
                <v-card-actions class="grid-list-xl justify-center">
                    <v-btn color="blue darken-1" text @click="dialog = false">关闭</v-btn>
                    <v-btn color="blue darken-1" text @click="saveDialogValue">保存</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>


        <!--隐藏的提交文章对话框-->
        <v-dialog v-model="showPublish" persistent max-width="800px">
            <v-card>
                <v-card-title>
                    <span class="headline">发布文章</span>
                </v-card-title>
                <v-card-text>
                    <v-container>
                        <v-form
                                ref="publishform"
                                v-model="pvalid"
                                :lazy-validation="lazy"
                        >
                            <v-row>
                                <Mutiselect
                                        v-model="blogTags"
                                        :options="blogTagList"
                                        :multiple="true"
                                        placeholder="选择标签"
                                        track-by="id"
                                        :allowEmpty="false"
                                        :max="5"
                                        label="name">
                                </Mutiselect>
                            </v-row>
                            <v-row>
                                <v-sheet class="mt-5" width="100%">
                                    <v-textarea
                                            v-model="intro"
                                            :auto-grow="true"
                                            :clearable="true"
                                            :counter="false"
                                            hint="在这里写文章简介，这个很关键"
                                            label="文章简介"
                                            :no-resize="true"
                                            :persistent-hint="true"
                                            placeholder="请输入点内容，但是别写作文（500个字以内）"
                                            :rounded="true"
                                            :row-height="24"
                                            :rows="8"
                                            :shaped="true"
                                            :solo="true"
                                            :rules="introRules"
                                            require
                                    />
                                </v-sheet>
                            </v-row>
                        </v-form>
                    </v-container>
                </v-card-text>
                <v-card-actions class="grid-list-xl justify-center">
                    <v-btn dark color="deep-orange accent-1" @click="clearPublishArea">算了</v-btn>
                    <v-btn dark color="teal lighten-2" @click="savePublishBlog">发布</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-content>
</template>

<script>
    import '@/assets/css/business/newblog/newblog.scss';


    export default {
        name: "newBlog",
        data: () => ({
            clientHeight: "",
            blogTypes: [],
            blogs: [],
            typeList: "",
            currentType: "",//当前选中的分类
            currentId: "",//当前博客的ID
            articleList: "",
            alert: false,
            nameRules: [
                v => !!v || '不能为空',
                v => (v && v.length <= 10) || '不能超过10个字符',
            ],
            sortName: "",// 分类名称
            dialogValue: "",//对话框名称
            dialogId: "",//对话框所属的 blogTypeId
            valid: true,//是否通过验证
            lazy: false,
            dialog: false,//修改分类 对话框
            editSN: "",//分类model
            blogContent: "",//博客内容
            blogNameRules: [
                v => !!v || '不能为空',
                v => (v && v.length <= 50) || '不能超过50个字符',
            ],
            blogTitle: "",//博客标题
            editorShow: false,//是否显示编辑区域
            showPublish: false,//是否显示发布文章对话框
            blogTags: [],//文章标签
            blogTagList: [],//已有的文章标签列表
            intro: "",//文章简介
            pvalid: true,//发布表单是否通过验证
            introRules: [
                v => !!v || '简介不能为空'
            ]
        }),
        methods: {
            initData() {
                this.getBlogTypes();
            },
            getBlogTypes() {
                this.$axios.post("/api/blogType/typeList").then(res => {
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.blogTypes = [];
                        this.blogTypes.push(...resultData);
                    }
                })
            },
            getBlogsByType(blogType) {
                this.$axios.post("/api/blog/getBlogsByType", this.$qs.stringify({
                    blogType: blogType
                })).then(res => {
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.blogs = [];
                        this.blogs.push(...resultData);
                        this.clearEditorArea();
                        //赋值当前选中的分类
                        this.currentType = blogType;
                        //取消所有选中的文章
                        this.articleList = "";
                    }

                })
            },
            openEditDialog(id, value) {
                this.dialogValue = value;
                this.dialogId = id;
                this.dialog = true;

            },
            showEditorArea(blog) {
                this.clearEditorArea();
                //切换文章 富文本区域赋值
                this.editorShow = true;
                this.blogTitle = blog.title;
                this.currentId = blog.id;
                this.blogContent = blog.blogContent;
                //发布区域赋值
                this.intro = blog.intro;
                this.blogTags = blog.tags;
            },
            /**
             * 清空编辑区域内容
             * */
            clearEditorArea() {
                //清空富文本区域
                this.editorShow = false;
                this.blogTitle = "";
                this.blogContent = "";
                //清空发布区域
                this.intro = "";
                this.blogTagList = [];
            },
            /**
             * 新建当前分类下的 文章
             */
            newArticle() {
                if (this.currentType === "") {
                    this.$iziToast.warning({message: "先选一个分类再点噻!"});
                    return;
                }
                let blogTitle = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                //添加一个草稿
                this.$axios.post("/api/blog/add", this.$qs.stringify({
                    title: blogTitle,
                    blogType: this.currentType
                })).then(res => {
                    let result = res.data;
                    let resultCode = result.code;
                    let resultMessage = result.message;
                    if (result && resultCode === 200) {
                        //重新查询该分类下的文章信息 并重新复制 blogs
                        this.getBlogsByType(this.currentType);
                        //激活 mavonEditor,并赋值title
                        this.blogTitle = blogTitle;
                    }
                    if (result && resultCode === 500) {
                        //提示错误
                        this.$iziToast.error({message: resultMessage});
                    }
                });
            },
            saveDialogValue() {
                this.$axios.post("/api/blogType/edit", this.$qs.stringify({
                    id: this.dialogId,
                    name: this.dialogValue
                })).then(res => {
                    let result = res.data;
                    let resultCode = result.code;
                    let resultMessage = result.message;
                    if (result && resultCode === 200) {
                        //重新渲染
                        this.getBlogTypes();
                        this.alert = false;
                        this.$iziToast.success({message: resultMessage});
                    }
                    if (result && resultCode === 500) {
                        this.$iziToast.error({message: resultMessage});
                    }
                    this.dialog = false;
                });
            },
            /**
             * 删除博客类型
             */
            deleteBlogType(id) {
                this.$axios.post("/api/blogType/delete", this.$qs.stringify({
                    id: id,
                })).then(res => {
                    let result = res.data;
                    let resultCode = result.code;
                    let resultMessage = result.message;
                    if (result && resultCode === 200) {
                        //重新渲染
                        this.getBlogTypes();
                        this.alert = false;
                        this.$iziToast.success({message: resultMessage});
                    }
                    if (result && resultCode === 500) {
                        this.$iziToast.error({message: resultMessage});
                    }
                    this.dialog = false;
                });
            },
            /**
             * 删除博客内容
             * */
            deleteBlog(blogId) {
                this.$axios.post("/api/blog/delete", this.$qs.stringify({
                    id: blogId,
                })).then(res => {
                    let result = res.data;
                    let resultCode = result.code;
                    let resultMessage = result.message;
                    if (result && resultCode === 200) {
                        //重新渲染
                        this.getBlogsByType(this.currentType);
                        this.clearEditorArea();
                        this.$iziToast.success({message: resultMessage});
                    }
                    if (result && resultCode === 500) {
                        this.$iziToast.error({message: resultMessage});
                    }
                    this.dialog = false;
                });
            },
            /**
             * 添加博客分类
             */
            addBlogSort() {
                if (this.$refs.form.validate()) {
                    //表单校验通过
                    this.$axios.post("/api/blogType/add", this.$qs.stringify({
                        sortName: this.sortName
                    })).then(res => {
                        let result = res.data;
                        let resultCode = result.code;
                        let resultMessage = result.message;
                        if (result && resultCode === 200) {
                            //重新渲染
                            this.getBlogTypes();
                            this.$iziToast.success({message: resultMessage});
                            this.alert = false;
                        }
                        if (result && resultCode === 500) {
                            this.$iziToast.error({message: resultMessage});
                        }
                    })
                }
            },
            /**
             * 动态监控屏幕宽高比
             */
            initClientWidth() {
                // 获取浏览器可视区域高度
                this.clientHeight = `${document.documentElement.clientHeight}`;
                let _that = this;
                window.onresize = function temp() {
                    _that.clientHeight = `${document.documentElement.clientHeight}`;
                };
            },
            /**
             * 编辑分类
             */
            editType(blog) {
                this.$axios.post("/api/blogType/edit", this.$qs.stringify({
                    blog: blog,
                    sortName: this.sortName
                })).then(res => {
                    let result = res.data;
                    let resultCode = result.code;
                    let resultMessage = result.message;
                    if (result && resultCode === 200) {
                        //重新渲染
                        this.getBlogTypes();
                        this.alert = false;
                    }
                    if (result && resultCode === 500) {
                        this.$iziToast.error({message: resultMessage});
                    }
                })
            },
            /**
             * 发布新博客
             */
            openPublishArea() {
                this.showPublish = true;
                this.$axios.post("/api/blogTag/list").then(res => {
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.blogTagList = [];
                        this.blogTagList.push(...resultData);
                    }
                })
            },
            /**
             * 保存发布的博客
             */
            savePublishBlog() {
                if (this.$refs.publishform.validate()) {
                    if (!this.blogTags) {
                        this.$iziToast.warning({message: "至少选择一个文章标签，听话！"});
                        return;
                    }
                    this.$axios.post("/api/blog/update", this.$qs.stringify({
                        id: this.currentId,
                        blogTagList: JSON.stringify(this.blogTags),
                        intro: this.intro,
                        blogType: this.currentType,
                        title: this.blogTitle,
                        blogContent: this.blogContent
                    })).then(res => {
                        let result = res.data;
                        let resultData = result.data;
                        let resultCode = result.code;
                        let resultMessage = result.message;
                        if (result && resultCode === 200) {
                            // this.blogTagList = [];
                            // this.blogTagList.push(...resultData);
                            this.$iziToast.success({message: resultMessage});
                            //重新渲染当前分类的博客,因为名称可能有变化
                            this.getBlogsByType(this.currentType);
                        }
                    });
                    this.showPublish = false;
                }

            },
            /**
             * 清空发布区域的内容
             */
            clearPublishArea() {
                // this.blogTags = [];
                // this.intro = "";
                this.showPublish = false;
            }

        },
        mounted() {
            this.initClientWidth();
            this.initData();

        },
        watch: {
            // 如果 `clientHeight` 发生改变，这个函数就会运行
        }
    }
</script>

<style scoped>

</style>